<template>
  <div class="renew flex column grow">
    <yn-common-title name="精彩回顾" @link="link">
      <template slot="icon">
        <img
          :src="PIC_URL + '/tlbypcWeb/home/jchg.png'"
          @error="
            $fn.imageHandler(path + '/client/home/images/jchg.png', $event)
          "
        />
      </template>
      <div slot="right" @click="link" style="cursor: pointer">更多</div>
    </yn-common-title>
    <div class="contents flex column grow">
      <div class="noMore flex column grow" v-if="list.length == 0">
        <div class="noMoreBg">暂无数据</div>
      </div>
      <div class="items" v-if="list.length > 0">
        <div
          class="item"
          v-for="item in list"
          :key="item.videoId"
          @click="link(item.recordId)"
        >
          <span class="time"
            >{{ item.recordDay }} {{ item.recordStartTime }}-{{
              item.recordEndTime
            }}</span
          >
          <p class="name">{{ item.subject }}</p>
          <p class="txt">{{ item.standpoint }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { getRecordLivelist, queryRecordChargeLiveList } from "../../api/index";

import { CLIENT } from "@/common/const";
import title from "../common/title";
import { getUrlParams } from "../../script/utils";
export default {
  data() {
    return {
      list: [],
      path: CLIENT,
    };
  },
  components: { "yn-common-title": title },
  mounted() {
    const { version } = getUrlParams();
    if (version >= 1) {
      return this.chargeRecordLivelist();
    }
    this.freeRecordLivelist();
  },
  methods: {
    link(id) {
      if (!navigator.onLine) return Toast("网络连接失败，请检查网络设置");
      id = typeof id == "string" ? id : "";
      const { version } = getUrlParams();
      const freeUrl = `${CLIENT}/client/liveOff.htm?playId=${id}`;
      const chargeUrl = `${CLIENT}//client/toLiveVip.htm?playId=${id}`;
      window.prompt(
        "",
        `up://["user.info",${Date.now()},{"type":"video","data":{"url":"${
          version == 1 ? chargeUrl : freeUrl
        }"}}]`
      );
    },
    async freeRecordLivelist() {
      const self = this;
      await getRecordLivelist().then((back) => {
        if (back.status == 1) {
          let data = back.data;
          this.list = data.map((item) => {
            item.subject = item.subject.substring(0, 5);
            item.standpoint = item.standpoint.replace(
              /(<[^>]+>)|([&nbsp;])/g,
              ""
            );
            item.recordDay = format(new Date(item.recordStartTime), "MM-DD");
            item.recordStartTime = format(
              new Date(item.recordStartTime),
              "HH:mm"
            );
            item.recordEndTime = format(new Date(item.recordEndTime), "HH:mm");
            return item;
          });
        }
      });
    },
    async chargeRecordLivelist() {
      const self = this;
      const { token } = getUrlParams();
      // const {
      //   data: { videos },
      // } =
      await queryRecordChargeLiveList({
        productId: window.localStorage.getItem("productId"),
        clientCentralToken: token,
      }).then((back) => {
        if (back.status == 1) {
          let videos = back.data.videos;
          this.list = videos.map((item) => {
            item.subject = item.subject.substring(0, 5);
            item.standpoint = item.standpoint.replace(
              /(<[^>]+>)|([&nbsp;])/g,
              ""
            );
            item.recordDay = format(new Date(item.recordStartTime), "MM-DD");
            item.recordStartTime = format(
              new Date(item.recordStartTime),
              "HH:mm"
            );
            item.recordEndTime = format(new Date(item.recordEndTime), "HH:mm");
            return item;
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.renew {
  overflow: hidden;
  border: 1px solid #25262a;
  .title .name {
    cursor: pointer;
  }
}

.banner {
  margin: 20px 0 16px;
  max-height: 300px;
  overflow: hidden;
}
.items {
  overflow: auto;
  padding: 0 20px;
}
.noMore {
  flex-direction: row; /* 子元素横向排列 */
  justify-content: center; /* 相对父元素水平居中 */
  align-items: center; /*  子元素相对父元素垂直居中 */
  .noMoreBg {
    color: #bcbfc4;
    font-size: 16px;
  }
}
.item {
  color: #bcbfc4;

  position: relative;
  background: url($PIC_URL + "/tlbypcWeb/home/bg_pic.png") no-repeat center;
  background-size: cover;
  margin-top: 19px;
  cursor: pointer;
  padding: 15px 0 15px;
  .name {
    text-align: center;
    height: 33px;
    line-height: 33px;
    font-size: 20px;
    font-weight: 400;
    background: url($PIC_URL + "/tlbypcWeb/home/title_bg.png") no-repeat left;
    width: 136px;
    overflow: hidden;
    white-space: nowrap;
  }
  .txt {
    color: #bcbfc4;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    overflow: hidden;
    word-break: break-all;
    margin: 11px 21px 0;
    height: 54px;
    text-align: justify;
  }
  .time {
    position: absolute;
    top: 25px;
    right: 20px;
    font-size: 18px;
    font-weight: 400;
    color: #bcbfc4;
  }
}
</style>
